<!--
 * @Author: zwz
 * @Date: 2023-09-08 23:08:36
 * @LastEditors: zwz
 * @LastEditTime: 2023-09-09 12:21:25
 * @Description: 请填写简介
-->
<template>
  <div class="app-container">
    <div class="container">
      <div class="container-left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当天消费数据</span>
          </div>
          <div class="consumption">
            <div class="consumption-item">
              <img
                  class="consumption-item-img"
                  src="@/assets/images/frontPage/NumberConsumers.jpg"
                  alt=""
              />
              <div>
                <div class="consumption-item-title">消费总人数</div>
                <div class="consumption-item-number">{{totalPeople}}</div>
              </div>
            </div>
            <div class="consumption-item">
              <img
                  class="consumption-item-img"
                  src="@/assets/images/frontPage/zongjine.jpg"
                  alt=""
              />
              <div>
                <div class="consumption-item-title">消费总金额</div>
                <div class="consumption-item-number">{{totalAmount | currency}}</div>
              </div>
            </div>
            <div class="consumption-item">
              <img
                  class="consumption-item-img"
                  src="@/assets/images/frontPage/jingdan.jpg"
                  alt=""
              />
              <div>
                <div class="consumption-item-title">订单总数</div>
                <div class="consumption-item-number">{{totalOrder}}</div>
              </div>
            </div>
<!--            <div class="consumption-item">-->
<!--              <img-->
<!--                  class="consumption-item-img"-->
<!--                  src="@/assets/images/frontPage/quxiao.jpg"-->
<!--                  alt=""-->
<!--              />-->
<!--              <div>-->
<!--                <div class="consumption-item-title">取消订单</div>-->
<!--                <div class="consumption-item-number">{{totalCancel}}</div>-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </el-card>
        <div class="container-left-middle">
          <div style="width: 100%">
            <el-card class="box-card" >
              <div slot="header" class="clearfix">
                <span>样品预警信息</span>
              </div>
              <el-table stripe border :data="goodsExampleList" style="width: 100%" max-height="200px" height="200px">
                <el-table-column prop="id" label="序号" width="80" ></el-table-column>
                <el-table-column prop="goodsName" label="菜品名称" min-width="100"></el-table-column>
                <el-table-column prop="sampleTime" label="留样日期" min-width="100" >
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.sampleTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="destroyTime" label="销毁日期" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.destroyTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="留样照片" prop="images"  :width="sampleImageWidth" >
                  <template v-slot:default="scope">
                    <image-preview v-for="(item,index) in scope.row.imageUrl"
                              style="width: 100px; height: 100px; margin-right: 15px"
                              :src="item">
                    </image-preview>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
<!--          <div style="width: 49.5%">-->
<!--            <el-card class="box-card">-->
<!--              <div slot="header" class="clearfix">-->
<!--                <span>消费趋势图</span>-->
<!--              </div>-->
<!--              <div class="echart" id="mychart" :style="myChartStyle"></div>-->
<!--            </el-card>-->
<!--          </div>-->
        </div>
        <el-tabs class="box-card container-left-buttom" v-model="activeName" type="border-card" @tab-click="handleClick" >
          <el-tab-pane label="最新订单记录" name="1">
            <el-table stripe border :data="todayOrders"  max-height="300px" height="300px">
              <el-table-column prop="id" label="序号" width="80"></el-table-column>
              <el-table-column prop="createTime" label="下单时间"> </el-table-column>
              <el-table-column prop="type" label="订单类型">
                <template v-slot="{row}">
                  <span v-if="row.type==='buffet'">点餐台自助订单</span>
                  <span v-else-if="row.type==='normal'">点餐台桌餐订单</span>
                  <span v-else-if="row.type==='replace'">点餐台代购订单</span>
                  <span v-else>{{row.type}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="peopleCount" label="就餐人数"> </el-table-column>
              <el-table-column prop="amount" label="消费金额(元)">
                <template v-slot="{row}">
                  {{row.amount | currency}}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="食材采购信息" name="2">
            <el-table stripe border :data="storeInList" style="width: 100%;" max-height="300px">
              <el-table-column label="园区" align="center" prop="area" width="80" fixed="left"/>
              <el-table-column label="入库单号" align="center" prop="id"  min-width="80" />
              <el-table-column label="入库日期" align="center" prop="inTime" width="100">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.inTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="入库总金额" align="center" prop="amount" width="100">
                <template v-slot="{row}">
                  {{row.amount | currency}}
                </template>
              </el-table-column>
              <el-table-column label="入库状态" align="center" prop="status" width="100">
                <template slot-scope="scope">
                  <span :style="{'color': statusColors(scope.row.status)}">{{ scope.row.status }}</span>
                </template>
              </el-table-column>
              <el-table-column label="供应商名称" align="center" prop="vendorName" min-width="150"/>
              <el-table-column label="确定人" align="center" prop="confirmer" width="100"/>
              <el-table-column label="索证索票" prop="images" align="center" :width="storeImageWidth" >
                <template v-slot="{row}">
                  <image-preview v-for="(item) in row.imageArr"
                            style="width: 100px; height: 100px; margin-right: 15px"
                            :src="item">
                  </image-preview>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="container-right">
        <el-card class="box-card" >
          <div slot="header" class="clearfix">
            <span>当天自助餐菜单</span>
            <div class="container-right-card-header">
              <div
                  @click="handlerMenu(true)"
                  :style="{
                  color: chooseFlag ? '#fff' : '#000',
                  backgroundColor: chooseFlag ? '#1E90FF' : '#fff',
                }"
                  class="container-right-card-header-left"
              >
                早餐
              </div>
              <div
                  @click="handlerMenu(false)"
                  :style="{
                  color: !chooseFlag ? '#fff' : '#000',
                  backgroundColor: !chooseFlag ? '#1E90FF' : '#fff',
                }"
                  class="container-right-card-header-right"
              >
                中餐
              </div>
            </div>
          </div>
          <el-table border :data="tableDataMenu" style="width: 100%;" height="713px" max-height="713px">
            <el-table-column prop="hot" label="类型" width="120"> </el-table-column>
            <el-table-column prop="goods" label="菜品" >
              <!-- 插槽图片和文案 -->
              <template slot-scope="scope">
                <!-- <div class="container-right-card-img">
                  <img :src="baseUrl + scope.row.image" alt="" />
                </div> -->
                <div class="container-right-card-text">
                  <span>{{ scope.row.goodsName }}</span>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="amount" label="价格" width="180">
            </el-table-column> -->
            <el-table-column prop="taste" label="口味" width="120"> </el-table-column>
          </el-table>
        </el-card>
<!--        <el-card style="margin-top: 10px">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>最新实时库存</span>-->
<!--          </div>-->
<!--          <el-table border :data="tableDataAll" style="width: 100%">-->
<!--            <el-table-column type="index" label="序号" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="name" label="食材名称" >-->
<!--            </el-table-column>-->
<!--            <el-table-column  label="库存数量">-->
<!--              <template v-slot="{row}">-->
<!--                {{row.amount}}{{row.unit}}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
      </div>
    </div>
  </div>
</template>

<script>
import {
  listTodayEvening,
  listTodayMorning,
  listTodayOrder,
  resourceAll,
  latestResource,
  balanceToday,
  goodsExampleTenList, storeInTenList
} from '@/api/shop/goods'
import * as echarts from "echarts";
import {foodStoreGetAll, foodStoreLatest} from "@/api/store/resource";
export default {
  data() {
    return {
      xData: [
        0,1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31
      ], //横坐标
      yData: [23, 24, 18, 25, 23, 27, 28, 25,24, 18, 25, 27, 28, 25,27, 28, 25], //数据
      myChartStyle: { float: "left", width: "100%", height: "300px" },
      activeColor: "#fff",
      activebackgroundColor: "blue",
      chooseFlag: true,
      tableDataMenu:[],
      todayOrders:[],
      tableDataAll:[],
      totalAmount:0,
      totalCancel:0,
      totalOrder:0,
      totalPeople:0,
      baseUrl: process.env.VUE_APP_BASE_API,
      goodsExampleList:[],
      sampleImageWidth:150,
      storeImageWidth:150,
      activeName:'1',
      storeInList:[]
    };
  },
  created () {
    this.getlistTodayMorning()
    this.getlistTodayEvening()
    this.getbalanceToday()
    this.goodsExampleTenList()
    this.handleClick()
    // this.getresourceAll()

  },
  mounted() {
    // this.initEcharts();
  },
  methods: {
    statusColors(status) {
      if (status === "已入库") {
        return '#2a9c4a'
      } else {
        return '#fe9f29'
      }
    },
    //tabbar 页面切换
    handleClick(){
      if(this.activeName==='1'){
        this.getTodayOrders()
      }else if(this.activeName==='2'){
        this.storeInTenList()
      }
    },
    //获取食材采购信息
    storeInTenList(){
      storeInTenList().then(res=>{
        let maxWith = 1;
        res.rows.map(item=>{
          item.imageArr=[]
          if (item.imageUrl ) {
            item.imageArr = item.imageUrl.split(",");
          }
          if (item.imageArr.length > maxWith) {
            maxWith = item.imageArr.length;
          }
        })
        this.storeImageWidth = maxWith * 150;
        this.storeInList=res.rows
      })
    },
    //获取前10条留样数据
    goodsExampleTenList(){
      goodsExampleTenList().then(res=>{
        let maxWith = 1;
        res.data.map(item=>{
          item.imageUrl=[]
          if(item.images){
            item.imageUrl=item.images.split(",")
          }
          if (item.imageUrl.length > maxWith) {
            maxWith = item.imageUrl.length;
          }
        })
        this.sampleImageWidth = maxWith * 150;
        this.goodsExampleList=res.data
      })
    },
    async getTodayOrders(){
      const { rows } =  await listTodayOrder()
      this.todayOrders = rows
    },
    async getlistTodayMorning(){
      const { rows } =  await listTodayMorning()
      this.morningData = rows.map((item) => ({...item , goods:{image:item.image,name:item.goodsName}}))
      if (this.chooseFlag) {
        this.tableDataMenu = rows
      }
    },
    async getlistTodayEvening(){
      const { rows } =  await listTodayEvening()
      this.eveningData = rows
      if (!this.chooseFlag) {
        this.tableDataMenu = rows.map((item) => ({...item , goods:{image:item.image,name:item.goodsName}}))
      }
    },
    async getresourceAll(){
      this.tableDataAll = await foodStoreGetAll().rows
    },
    async getbalanceToday(){
      const { data:{totalAmount,totalCancel,totalOrder,totalPeople} } =  await balanceToday()
      this.totalAmount = totalAmount
      this.totalCancel = totalCancel
      this.totalOrder = totalOrder
      this.totalPeople = totalPeople
    },
    handlerMenu(flag) {
      this.chooseFlag = flag;
      if (flag) {
        this.tableDataMenu = this.morningData
      } else {
        this.tableDataMenu = this.eveningData
      }
    },
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          type: "category",
          data: this.xData,
        },
        legend: {
          data: ["消费人数", "消费金额"],
          bottom: "0px",
        },
        yAxis: {},
        series: [
          {
            name: "消费人数",
            type: "bar", //形状为柱状图
            itemStyle: {
              width: "200px",
              color: "#0091ff",
            },
            barWidth: "50%",
            data: this.yData,
          },
          {
            // name: "",
            name: "消费金额",
            type: "line",
            smooth: true,
            data: [123, 54, 68, 35, 23, 97, 28, 35,24, 58, 25, 57, 18, 26,27, 98, 35],
            itemStyle: {
              color: "yellow",
            },
          },
        ],
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .container-left {
    width: 60%;
    .consumption {
      display: flex;
      justify-content: space-around;
      .consumption-item {
        width: 25%;
        display: flex;
        align-items: center;
        .consumption-item-img {
          width: 47px;
          margin-right: 15px;
        }
        .consumption-item-title {
          font-size: 10px;
          color: #746060;
        }
        .consumption-item-number {
          font-size: 20px;
        }
      }
    }
    .container-left-middle {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }
    .container-left-buttom {
      margin-top: 10px;
    }
  }
  .container-right {
    margin-left: 10px;
    width: 40%;
    .container-right-card-header {
      float: right;
      display: flex;
      .container-right-card-header-left {
        width: 50px;
        height: 30px;

        // background-color: blue;
        border-radius: 15px 0 0 15px;
        text-align: center;
        line-height: 30px;
        border: 0.5px solid #ccc;
        // color: #fff;
      }
      .container-right-card-header-right {
        width: 50px;
        height: 30px;
        // background-color: blue;
        border-radius: 0 15px 15px 0;
        text-align: center;
        line-height: 30px;
        border: 0.5px solid #ccc;
        // color: #fff;
      }
    }
  }
}
</style>
